<template>
  <div>
    <h3>审批</h3>

    <!-- <h3>测试存储桶</h3>
    <input type="file" @change="mychange" ref="input" />
    <img :src="url" alt="" /> -->
    <h3>图片上传组件</h3>
    
    <imgupload :imgUrl.sync="imgUrl"></imgupload>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'

export default {
  name: 'approvals',
  data () {
    return {
      cosObj: null,
      url: '',
      imgUrl: require('@/assets/common/wanzi.jpg')
    }
  },
  methods: {
    mychange () {
      // console.log(this.$refs.input.files);
      const file = this.$refs.input.files[0]

      this.cosObj.putObject(
        {
          Bucket: 'hr73-1307224077' /* 必须 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // data: 上传成功后的返回值
          // err: 上传出错的错误信息
          console.log(err || data)
          console.log(data.Location)
          this.url = 'http://' + data.Location
        }
      )
    }
  },
  created () {
    this.cosObj = new COS({
      SecretId: 'AKIDLWR4RYP0KOBhwugEVVEfpiLipfHcgTzF', // 身份识别 ID
      SecretKey: 'zi9JDqBG6fxxh9KDqCG3arqYy81cx2qM' // 身份密钥
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
